<template>
    <div class="container">
        <div class="drag"></div>
        <div class="form">
            <label>
                <span>位置:</span>
                <input type="text" v-model="address" @keyup="geoHandler" @focusin="focus = true"
                    @focusout="focusHandler" />
            </label>
            <Transition>
                <div class="source" v-show="addList?.length && focus">
                    <div class="item" v-for="item in addList" :key="item.id" @click="setAddress(item)">
                        {{ item.country }} {{ item.adm1 }} {{ item.adm2 }}-{{ item.name }}
                    </div>
                </div>
            </Transition>
            <button @click="$router.push('/')">返 回</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getGeoApi } from '@renderer/api'
import type { Location } from '@renderer/types/axios'
import useAdInfo from '@renderer/store/adStore'

const adInfo = useAdInfo()
const throttle = ref(false)
const address = ref(adInfo.add.name)
const addList = ref<Location[]>()
const focus = ref(false)

function geoHandler() {
    if (throttle.value || address.value == '') return
    throttle.value = true
    setTimeout(() => {
        getGeoApi(address.value).then(res => {
            console.log(res.data.location)
            addList.value = res.data.location
        })
        throttle.value = false
    }, 1000)
}
function setAddress(ad: Location) {
    address.value = ad.name
    adInfo.setInfo({
        nation: ad.country,
        district: ad.adm2 == ad.name ? undefined : ad.name,
        adcode: parseInt(ad.id),
        province: ad.adm1,
        city: ad.adm2
    })
    adInfo.setAddress({ id: ad.id, name: ad.name })
}
function focusHandler() {
    setTimeout(() => {
        focus.value = false
    }, 100)
}
</script>

<style lang="scss" scoped>
.container {
    background: #ffffff;
    color: #000000;
    overflow: auto;
    width: 100vw;
    height: 100vh;
    user-select: auto;

    .drag {
        -webkit-app-region: drag;
        width: 100%;
        height: 20px;
        background: #f4f0eb;
        border-radius: 8px 8px 0 0;
        border-bottom: 1px solid #c7c9cf;
    }

    .form {
        margin: 10px 20px;
        font-size: 16px;
        color: #303133;
        position: relative;

        label {
            display: flex;
            align-items: center;
            margin-top: 10px;
            gap: 10px;

            span {
                width: 60px;
                text-align: right;
                font-size: 14px;
            }

            input {
                flex: 1;
                height: 40px;
                border: 1px solid #DCDFE6;
                outline: none;
                border-radius: 6px;
                padding: 0 5px;
                line-height: 40px;

                &:focus {
                    border-color: #79bbff;
                }
            }
        }

        .source {
            max-height: 200px;
            overflow: hidden;
            overflow-y: auto;
            position: absolute;
            top: 46px;
            left: 70px;
            width: calc(100% - 70px);
            font-size: 12px;
            border-radius: 8px;
            box-shadow: 0px 0px 6px #0000001f;
            z-index: 1;

            .item {
                transition: all .3s;
                background: #F5F7FA;
                padding: 8px;
                margin-top: 1px;

                &:first-child {
                    margin-top: 0;
                }

                &:hover {
                    background: #79bbff;
                    color: #fff;
                }
            }
        }

        button {
            display: block;
            margin: 10px auto;
            border-radius: 8px;
            border: 1px solid #a0cfff;
            font-size: 14px;
            padding: 8px 18px;
            word-spacing: 8px;
            color: #409eff;
            background: #ecf5ff;

            &:hover {
                color: #ffffff;
                border-color: #409eff;
                background-color: #409eff;
            }

            &:active {
                color: #ffffff;
                border-color: #337ecc;
                background-color: #337ecc;
            }
        }
    }

    .v-enter-active,
    .v-leave-active {
        transition: all 0.5s;
    }

    .v-enter-from,
    .v-leave-to {
        opacity: 0;
    }


}
</style>